<template>
  <div style="padding: 60px 0">
    <GetBack :titles="'我的收藏'" />
    <div>
      <ul class="collectTheNewsList">
        <li v-for="(item,index) in collectTheNewsList" :key="index">
          <router-link :to="{name:'/DetailsNews', query:{ articleId: item.articleId }}"> <span>{{ index+1}}</span> {{item.title}}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import GetBack from "@/components/GetBack";
import {getCollectTheNewsList} from "@/api/index.api";

export default {
name: "MyCollect",
  data(){
  return{
    collectTheNewsList:[],//收藏列表
  }
  },
  created() {
    getCollectTheNewsList().then(res=>{
      console.log(res.rows)
      this.collectTheNewsList=res.rows
    })
  },
  components:{
    GetBack,
  }
}
</script>

<style lang="less" scoped>
.collectTheNewsList{
  display: flex;
  flex-wrap: wrap;
  li{
    width: 100%;
    padding: 5px 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    span{
      color: red;
      padding: 0 10px;
    }
    a{
      color: dimgray;
    }
  }
}
</style>